<template>
	<el-card style="margin: 32px;">
		<div style="margin-bottom: 18px;">
			<span class="title">意见反馈</span><span style="margin-left: 18px;">使用过程中，有好的意见、建议，请告诉我们！</span>
		</div>
		<el-divider></el-divider>
		<div class="content">
			<div class="content-left">
				上传图片
			</div>
			<div style="width: 100%;">
				<el-upload
				  action="https://jsonplaceholder.typicode.com/posts/"
				  list-type="picture-card"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove">
				  <i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</div>
		</div>
		<div class="content">
			<div class="content-left">
				昵称
			</div>
			<div style="width: 100%;">
				<el-input placeholder="请输入您的昵称" v-model="textarea" clearable></el-input>
			</div>
		</div>
		<div class="content">
			<div class="content-left">
				手机号
			</div>
			<div style="width: 100%;">
				<el-input placeholder="请输入您的手机号(选填)" v-model="textarea" clearable></el-input>
			</div>
		</div>
		<div class="content">
			<div class="content-left">
				*意见反馈
			</div>
			<div style="width: 100%;">
				<el-input  type="textarea" :rows="2" placeholder="请输入您的意见和建议" v-model="textarea" clearable></el-input>
			</div>
		</div>
		<div class="content">
			<div class="content-left">
			</div>
			<div style="width: 100%;">
				<el-button style="margin-top: 18px;margin-bottom: 18px;" type="primary" clearable>提交反馈</el-button>
			</div>
		</div>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				textarea: '',
				dialogImageUrl: '',
				dialogVisible: false
			};
		},
		methods: {
			  handleRemove(file, fileList) {
				console.log(file, fileList);
			  },
			  handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			  }
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 18px;
		font-weight: 700;
		color: #666;
	}
	.content{
		display: flex;
		align-items: center;
		margin-top: 18px;
		margin-bottom: 18px;
	}
	.content-left{
		min-width: 120px;
		text-align: right;
		padding-right: 18px;
	}
</style>